<template>
  <view class="home-container">
    <!-- 顶部状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部用户信息栏 -->
    <view class="header-section">
      <view class="user-info" @click="goToProfile">
        <view class="avatar-container">
          <u-avatar 
            :src="userInfo.avatar || '/static/default-avatar.png'" 
            size="50"
          ></u-avatar>
          <view class="online-indicator"></view>
        </view>
        <view class="user-details">
          <text class="user-name">{{ userInfo.nickname || '亲爱的用户' }}</text>
          <view class="user-status-container">
            <text class="user-status">{{ membershipText }}</text>
            <view v-if="userInfo.membershipType === 'premium'" class="vip-badge">
              <text class="vip-text">VIP</text>
            </view>
          </view>
        </view>
      </view>
      <view class="header-actions">
        <view class="action-btn" @click="goToNotifications">
          <u-icon name="bell" size="22" color="#666"></u-icon>
          <view v-if="unreadCount > 0" class="notification-badge">
            <text class="badge-text">{{ unreadCount > 99 ? '99+' : unreadCount }}</text>
          </view>
        </view>
        <view class="action-btn" @click="goToSearch">
          <u-icon name="search" size="22" color="#666"></u-icon>
        </view>
      </view>
    </view>
    
    <!-- AI助手快速入口 -->
    <view class="ai-assistant-card" @click="goToChat">
      <view class="ai-card-header">
        <view class="ai-info">
          <view class="ai-avatar-container">
            <image class="ai-avatar" src="/static/ai-avatar.png" mode="aspectFit"></image>
            <view class="ai-status-dot"></view>
          </view>
          <view class="ai-text">
            <text class="ai-title">AI智能助手</text>
            <text class="ai-subtitle">{{ aiGreeting }}</text>
          </view>
        </view>
        <view class="ai-action">
          <view class="chat-btn">
            <u-icon name="message-circle" size="18" color="white"></u-icon>
          </view>
        </view>
      </view>
      
      <!-- AI功能特性 -->
      <view class="ai-features">
        <view class="feature-item">
          <u-icon name="zap" size="16" color="#007aff"></u-icon>
          <text class="feature-text">智能问答</text>
        </view>
        <view class="feature-item">
          <u-icon name="heart" size="16" color="#ff6b6b"></u-icon>
          <text class="feature-text">健康监测</text>
        </view>
        <view class="feature-item">
          <u-icon name="book" size="16" color="#4ecdc4"></u-icon>
          <text class="feature-text">育儿指导</text>
        </view>
      </view>
      
      <view class="quick-questions">
        <text class="questions-title">快速提问</text>
        <view class="questions-list">
          <view 
            v-for="(question, index) in quickQuestions" 
            :key="index"
            class="question-tag"
            @click.stop="askQuestion(question)"
          >
            <text class="question-text">{{ question }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 宝宝信息卡片 -->
    <view v-if="babyInfo" class="baby-info-card" @click="goToBabyProfile">
      <view class="baby-header">
        <text class="baby-name">{{ babyInfo.name }}</text>
        <text class="baby-age">{{ calculateAge(babyInfo.birthDate) }}</text>
      </view>
      <view class="baby-stats">
        <view class="stat-item">
          <text class="stat-label">体重</text>
          <text class="stat-value">{{ babyInfo.weight || '--' }}kg</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">身高</text>
          <text class="stat-value">{{ babyInfo.height || '--' }}cm</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">性别</text>
          <text class="stat-value">{{ babyInfo.gender === 'male' ? '男宝' : '女宝' }}</text>
        </view>
      </view>
    </view>
    
    <!-- 添加宝宝信息提示 -->
    <view v-else class="add-baby-card" @click="goToAddBaby">
      <u-icon name="plus-circle" size="40" color="#007aff"></u-icon>
      <text class="add-baby-text">添加宝宝信息，获得个性化服务</text>
    </view>
    
    <!-- 功能菜单 -->
    <view class="function-menu">
      <text class="menu-title">智能服务</text>
      <view class="menu-grid">
        <view 
          v-for="(item, index) in functionMenus" 
          :key="index"
          class="menu-item"
          @click="goToFunction(item)"
        >
          <view class="menu-icon" :style="{ backgroundColor: item.bgColor }">
            <u-icon :name="item.icon" size="24" color="white"></u-icon>
          </view>
          <text class="menu-text">{{ item.title }}</text>
        </view>
      </view>
    </view>
    
    <!-- 推荐内容 -->
    <view class="recommend-section">
      <view class="section-header">
        <text class="section-title">为您推荐</text>
        <text class="more-text" @click="goToContent">更多</text>
      </view>
      
      <!-- 内容列表 -->
      <scroll-view class="content-scroll" scroll-x>
        <view class="content-list">
          <view 
            v-for="(content, index) in recommendContents" 
            :key="index"
            class="content-item"
            @click="viewContent(content)"
          >
            <image 
              class="content-image" 
              :src="content.coverUrl" 
              mode="aspectFill"
            ></image>
            <view class="content-info">
              <text class="content-title">{{ content.title }}</text>
              <view class="content-meta">
                <text class="content-author">{{ content.author }}</text>
                <text class="content-views">{{ formatViews(content.viewCount) }}次观看</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 专家推荐 -->
    <view class="expert-section">
      <view class="section-header">
        <text class="section-title">专家团队</text>
        <text class="more-text" @click="goToExpert">更多</text>
      </view>
      
      <view class="expert-list">
        <view 
          v-for="(expert, index) in expertList" 
          :key="index"
          class="expert-item"
          @click="consultExpert(expert)"
        >
          <u-avatar :src="expert.avatar" size="60"></u-avatar>
          <view class="expert-info">
            <text class="expert-name">{{ expert.name }}</text>
            <text class="expert-title">{{ expert.title }}</text>
            <text class="expert-specialty">{{ expert.specialty }}</text>
          </view>
          <view class="expert-action">
            <u-button type="primary" size="mini">咨询</u-button>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部安全距离 -->
    <view class="safe-bottom"></view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { get } from '@/utils/request';
import { getBabyList, calculateBabyAge, BabyInfo as ApiBabyInfo } from '@/api/baby';
import { logPageVisit, logUserAction, error as logError, info as logInfo, performance } from '@/utils/debug';

// 宝宝信息接口
interface BabyInfo {
  id: string;
  name: string;
  birthDate: string;
  gender: 'male' | 'female';
  weight?: number;
  height?: number;
}

// 用户信息接口
interface UserInfo {
  id: string;
  nickname: string;
  avatar?: string;
  membershipType: string;
}

// 推荐内容接口
interface RecommendContent {
  id: string;
  title: string;
  coverUrl: string;
  author: string;
  viewCount: number;
  type: 'video' | 'article';
}

// 专家信息接口
interface ExpertInfo {
  id: string;
  name: string;
  avatar: string;
  title: string;
  specialty: string;
  rating: number;
}

// 功能菜单项接口
interface FunctionMenuItem {
  title: string;
  icon: string;
  bgColor: string;
  path: string;
}

@Component
export default class HomePage extends Vue {
  // 数据属性
  userInfo: UserInfo = {
    id: '',
    nickname: '',
    membershipType: 'basic'
  };
  
  babyInfo: BabyInfo | null = null;
  statusBarHeight: number = 0;
  unreadCount: number = 0;
  
  quickQuestions: string[] = [
    '宝宝发烧怎么办？',
    '辅食添加指南',
    '睡眠训练方法',
    '如何培养宝宝睡眠习惯？',
    '宝宝不爱吃饭怎么办？'
  ];
  
  // AI问候语
  aiGreetings: string[] = [
    '随时为您解答育儿问题',
    '让育儿变得更简单',
    '您的专属育儿顾问',
    '24小时在线陪伴',
    '科学育儿，从这里开始'
  ];
  
  currentGreetingIndex: number = 0;
  
  functionMenus: FunctionMenuItem[] = [
    {
      title: 'AI咨询',
      icon: 'chat',
      bgColor: '#007aff',
      path: '/pages/chat/chat'
    },
    {
      title: '商品推荐',
      icon: 'shopping-cart',
      bgColor: '#ff6b35',
      path: '/pages/recommend/recommend'
    },
    {
      title: '内容创作',
      icon: 'camera',
      bgColor: '#28a745',
      path: '/pages/create/create'
    },
    {
      title: '专家咨询',
      icon: 'account',
      bgColor: '#6f42c1',
      path: '/pages/expert/expert'
    },
    {
      title: '成长记录',
      icon: 'calendar',
      bgColor: '#fd7e14',
      path: '/pages/growth/growth'
    },
    {
      title: '社区互动',
      icon: 'chat-bubble',
      bgColor: '#20c997',
      path: '/pages/community/community'
    }
  ];
  
  recommendContents: RecommendContent[] = [];
  expertList: ExpertInfo[] = [];
  
  // 计算属性
  get membershipText(): string {
    const typeMap: { [key: string]: string } = {
      'basic': '普通用户',
      'premium': '高级会员',
      'expert': '专家会员',
      'guest': '游客模式'
    };
    return typeMap[this.userInfo.membershipType] || '普通用户';
  }
  
  get aiGreeting(): string {
    return this.aiGreetings[this.currentGreetingIndex] || '随时为您解答育儿问题';
  }
  
  // 生命周期
  onLoad() {
    logPageVisit('首页');
    this.initPage();
    this.getSystemInfo();
    this.startGreetingRotation();
  }
  
  onShow() {
    this.loadUserInfo();
    this.loadBabyInfo();
    this.loadUnreadCount();
  }
  
  onPullDownRefresh() {
    this.refreshData();
  }
  
  onUnload() {
    // 清理定时器
    if (this.greetingTimer) {
      clearInterval(this.greetingTimer);
    }
  }
  
  // 方法
  
  // 定时器
  greetingTimer: any = null;
  
  /**
   * 获取系统信息
   */
  getSystemInfo() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
  }
  
  /**
   * 开始问候语轮播
   */
  startGreetingRotation() {
    this.greetingTimer = setInterval(() => {
      this.currentGreetingIndex = (this.currentGreetingIndex + 1) % this.aiGreetings.length;
    }, 3000); // 每3秒切换一次
  }
  
  /**
   * 加载未读消息数量
   */
  async loadUnreadCount() {
    try {
      // 这里应该调用实际的API获取未读消息数量
      // 目前使用模拟数据
      this.unreadCount = Math.floor(Math.random() * 5);
    } catch (error) {
      console.error('加载未读消息数量失败:', error);
    }
  }
  
  /**
   * 初始化页面
   */
  async initPage() {
    try {
      // 检查登录状态
      const token = uni.getStorageSync('token');
      const isGuest = uni.getStorageSync('isGuest');
      
      if (!token && !isGuest) {
        // 未登录，跳转到登录页
        uni.reLaunch({
          url: '/pages/login/login'
        });
        return;
      }
      
      // 加载数据
      await Promise.allSettled([
        this.loadUserInfo(),
        this.loadBabyInfo(),
        this.loadRecommendContents(),
        this.loadExpertList()
      ]);
    } catch (error) {
      logError('页面初始化失败', error, {
        hasToken: !!uni.getStorageSync('token'),
        isGuest: !!uni.getStorageSync('isGuest')
      });
      
      uni.showToast({
        title: '页面加载失败，请重试',
        icon: 'none'
      });
    }
  }
  
  /**
   * 加载用户信息
   */
  loadUserInfo() {
    try {
      const userInfo = uni.getStorageSync('userInfo');
      if (userInfo) {
        this.userInfo = userInfo;
      }
    } catch (error) {
      console.error('加载用户信息失败:', error);
      let errorDetails = '';
      try {
        errorDetails = JSON.stringify(error, null, 2);
      } catch (e) {
        errorDetails = error instanceof Error ? error.message : String(error);
      }
      console.error('用户信息加载错误详情:', errorDetails);
    }
  }
  
  /**
   * 加载宝宝信息
   */
  async loadBabyInfo() {
    try {
      const response = await getBabyList({ page: 1, pageSize: 1 });
      
      if (response.code === 0 && response.data.list.length > 0) {
        // 取第一个宝宝作为主要显示的宝宝
        const apiBaby = response.data.list[0];
        this.babyInfo = {
          id: apiBaby.id || '',
          name: apiBaby.name || '',
          birthDate: apiBaby.birthDate || (apiBaby as any).birthday || '',
          gender: apiBaby.gender || 'male',
          weight: apiBaby.weight,
          height: apiBaby.height
        };
      }
    } catch (error) {
      console.error('加载宝宝信息失败:', error);
      // 静默处理错误，可能是新用户还没有添加宝宝
    }
  }
  
  /**
   * 加载推荐内容
   */
  async loadRecommendContents() {
    try {
      const response = await get('/content/recommend', {
        userId: this.userInfo.id,
        babyAge: this.babyInfo ? this.calculateAgeInMonths(this.babyInfo.birthDate) : null,
        limit: 10
      });
      
      if (response.code === 0) {
        this.recommendContents = response.data.list || [];
      }
    } catch (error) {
      console.error('加载推荐内容失败:', error);
      // 使用模拟数据
      this.recommendContents = this.getMockContents();
    }
  }
  
  /**
   * 加载专家列表
   */
  async loadExpertList() {
    try {
      const response = await get('/expert/list', {
        limit: 3
      });
      
      if (response.code === 0) {
        this.expertList = response.data.list || [];
      }
    } catch (error) {
      console.error('加载专家列表失败:', error);
      // 使用模拟数据
      this.expertList = this.getMockExperts();
    }
  }
  
  /**
   * 刷新数据
   */
  async refreshData() {
    try {
      await Promise.all([
        this.loadBabyInfo(),
        this.loadRecommendContents(),
        this.loadExpertList()
      ]);
      
      uni.showToast({
        title: '刷新成功',
        icon: 'success'
      });
    } catch (error) {
      uni.showToast({
        title: '刷新失败',
        icon: 'none'
      });
    } finally {
      uni.stopPullDownRefresh();
    }
  }
  
  /**
   * 计算宝宝年龄
   * @param birthDate 出生日期
   * @returns 年龄字符串
   */
  calculateAge(birthDate: string): string {
    return calculateBabyAge(birthDate);
  }
  
  /**
   * 计算宝宝月龄
   */
  calculateAgeInMonths(birthDate: string): number {
    const birth = new Date(birthDate);
    const now = new Date();
    const diffTime = Math.abs(now.getTime() - birth.getTime());
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return Math.floor(diffDays / 30);
  }
  
  /**
   * 格式化观看次数
   */
  formatViews(count: number): string {
    if (count < 1000) {
      return count.toString();
    } else if (count < 10000) {
      return (count / 1000).toFixed(1) + 'k';
    } else {
      return (count / 10000).toFixed(1) + 'w';
    }
  }
  
  /**
   * 跳转到聊天页面
   */
  goToChat() {
    uni.navigateTo({
      url: '/pages/chat/chat'
    });
  }
  
  /**
   * 快速提问
   */
  askQuestion(question: string) {
    uni.navigateTo({
      url: `/pages/chat/chat?question=${encodeURIComponent(question)}`
    });
  }
  
  /**
   * 跳转到个人中心
   */
  goToProfile() {
    uni.switchTab({
      url: '/pages/profile/profile'
    });
  }
  
  /**
   * 跳转到通知页面
   */
  goToNotifications() {
    uni.navigateTo({
      url: '/pages/notifications/notifications'
    });
  }
  
  /**
   * 跳转到搜索页面
   */
  goToSearch() {
    uni.navigateTo({
      url: '/pages/search/search'
    });
  }
  
  /**
   * 跳转到宝宝档案
   */
  goToBabyProfile() {
    if (this.babyInfo && this.babyInfo.id) {
      uni.navigateTo({
        url: `/pages/baby/edit?id=${this.babyInfo.id}`
      });
    }
  }
  
  /**
   * 添加宝宝信息
   */
  goToAddBaby() {
    uni.navigateTo({
      url: '/pages/baby/add'
    });
  }
  
  /**
   * 跳转到功能页面
   */
  goToFunction(item: FunctionMenuItem) {
    if (item.path.includes('tab')) {
      uni.switchTab({
        url: item.path
      });
    } else {
      uni.navigateTo({
        url: item.path
      });
    }
  }
  
  /**
   * 跳转到内容页面
   */
  goToContent() {
    uni.switchTab({
      url: '/pages/content/content'
    });
  }
  
  /**
   * 查看内容详情
   */
  viewContent(content: RecommendContent) {
    uni.navigateTo({
      url: `/pages/content/detail?id=${content.id}`
    });
  }
  
  /**
   * 跳转到专家页面
   */
  goToExpert() {
    uni.switchTab({
      url: '/pages/expert/expert'
    });
  }
  
  /**
   * 咨询专家
   */
  consultExpert(expert: ExpertInfo) {
    uni.navigateTo({
      url: `/pages/expert/consult?expertId=${expert.id}`
    });
  }
  
  /**
   * 获取模拟内容数据
   */
  getMockContents(): RecommendContent[] {
    return [
      {
        id: '1',
        title: '新生儿护理要点',
        coverUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=newborn%20baby%20care%20tips&image_size=square',
        author: '张医生',
        viewCount: 1250,
        type: 'video'
      },
      {
        id: '2',
        title: '辅食添加时间表',
        coverUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20food%20schedule&image_size=square',
        author: '李营养师',
        viewCount: 890,
        type: 'article'
      },
      {
        id: '3',
        title: '宝宝睡眠训练',
        coverUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20sleep%20training&image_size=square',
        author: '王老师',
        viewCount: 2100,
        type: 'video'
      }
    ];
  }
  
  /**
   * 获取模拟专家数据
   */
  getMockExperts(): ExpertInfo[] {
    return [
      {
        id: '1',
        name: '张医生',
        avatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20pediatrician%20doctor&image_size=square',
        title: '主任医师',
        specialty: '儿科专家',
        rating: 4.9
      },
      {
        id: '2',
        name: '李营养师',
        avatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20nutritionist&image_size=square',
        title: '高级营养师',
        specialty: '婴幼儿营养',
        rating: 4.8
      },
      {
        id: '3',
        name: '王老师',
        avatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20early%20education%20teacher&image_size=square',
        title: '早教专家',
        specialty: '早期教育',
        rating: 4.7
      }
    ];
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding-bottom: 120rpx;
}

.status-bar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx 30rpx;
  
  .user-info {
    display: flex;
    align-items: center;
    flex: 1;
    
    .avatar-container {
      position: relative;
      
      .online-indicator {
        position: absolute;
        bottom: 2rpx;
        right: 2rpx;
        width: 16rpx;
        height: 16rpx;
        background-color: #4CAF50;
        border-radius: 50%;
        border: 2rpx solid white;
      }
    }
    
    .user-details {
      margin-left: 20rpx;
      flex: 1;
      
      .user-name {
        display: block;
        font-size: 34rpx;
        font-weight: 600;
        color: white;
        margin-bottom: 8rpx;
      }
      
      .user-status-container {
        display: flex;
        align-items: center;
        
        .user-status {
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.8);
          margin-right: 10rpx;
        }
        
        .vip-badge {
          background: linear-gradient(45deg, #FFD700, #FFA500);
          padding: 2rpx 8rpx;
          border-radius: 8rpx;
          
          .vip-text {
            font-size: 20rpx;
            color: white;
            font-weight: 600;
          }
        }
      }
    }
  }
  
  .header-actions {
    display: flex;
    align-items: center;
    gap: 20rpx;
    
    .action-btn {
      position: relative;
      width: 44rpx;
      height: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 22rpx;
      backdrop-filter: blur(10rpx);
      
      .notification-badge {
        position: absolute;
        top: -5rpx;
        right: -5rpx;
        min-width: 20rpx;
        height: 20rpx;
        background-color: #FF4757;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 6rpx;
        
        .badge-text {
          font-size: 18rpx;
          color: white;
          font-weight: 600;
        }
      }
    }
  }
}

.ai-assistant-card {
  margin: 20rpx;
  padding: 0;
  background: white;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  
  .ai-card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .ai-info {
      display: flex;
      align-items: center;
      flex: 1;
      
      .ai-avatar-container {
        position: relative;
        margin-right: 20rpx;
        
        .ai-avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 30rpx;
          border: 3rpx solid rgba(255, 255, 255, 0.3);
        }
        
        .ai-status-dot {
          position: absolute;
          bottom: 2rpx;
          right: 2rpx;
          width: 16rpx;
          height: 16rpx;
          background-color: #4CAF50;
          border-radius: 50%;
          border: 2rpx solid white;
          animation: pulse 2s infinite;
        }
      }
      
      .ai-text {
        flex: 1;
        
        .ai-title {
          display: block;
          font-size: 34rpx;
          font-weight: 600;
          color: white;
          margin-bottom: 8rpx;
        }
        
        .ai-subtitle {
          font-size: 26rpx;
          color: rgba(255, 255, 255, 0.9);
          transition: all 0.3s ease;
        }
      }
    }
    
    .ai-action {
      .chat-btn {
        width: 50rpx;
        height: 50rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 25rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10rpx);
        transition: all 0.3s ease;
        
        &:active {
          transform: scale(0.95);
          background: rgba(255, 255, 255, 0.3);
        }
      }
    }
  }
  
  .ai-features {
    padding: 25rpx 30rpx;
    display: flex;
    justify-content: space-around;
    background: #f8f9ff;
    
    .feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .feature-text {
        font-size: 24rpx;
        color: #666;
        margin-top: 8rpx;
      }
    }
  }
  
  .quick-questions {
    padding: 25rpx 30rpx 30rpx;
    
    .questions-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .questions-list {
      display: flex;
      flex-wrap: wrap;
      gap: 12rpx;
      
      .question-tag {
        padding: 12rpx 18rpx;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        border-radius: 20rpx;
        transition: all 0.3s ease;
        
        &:active {
          transform: scale(0.95);
        }
        
        .question-text {
          font-size: 24rpx;
          color: white;
          font-weight: 500;
        }
      }
    }
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10rpx rgba(76, 175, 80, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

.baby-info-card {
  margin: 20rpx;
  padding: 30rpx;
  background-color: white;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  
  .baby-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25rpx;
    
    .baby-name {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .baby-age {
      font-size: 28rpx;
      color: #007aff;
      background-color: #f0f8ff;
      padding: 8rpx 16rpx;
      border-radius: 12rpx;
    }
  }
  
  .baby-stats {
    display: flex;
    justify-content: space-around;
    
    .stat-item {
      text-align: center;
      
      .stat-label {
        display: block;
        font-size: 24rpx;
        color: #999;
        margin-bottom: 8rpx;
      }
      
      .stat-value {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
      }
    }
  }
}

.add-baby-card {
  margin: 20rpx;
  padding: 60rpx 30rpx;
  background-color: white;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  text-align: center;
  border: 2rpx dashed #e0e0e0;
  
  .add-baby-text {
    display: block;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #666;
  }
}

.function-menu {
  margin: 20rpx;
  padding: 30rpx;
  background-color: white;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  
  .menu-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 30rpx;
  }
  
  .menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30rpx;
    
    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .menu-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15rpx;
      }
      
      .menu-text {
        font-size: 26rpx;
        color: #333;
        text-align: center;
      }
    }
  }
}

.recommend-section,
.expert-section {
  margin: 20rpx;
  padding: 30rpx;
  background-color: white;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .more-text {
      font-size: 26rpx;
      color: #007aff;
    }
  }
}

.content-scroll {
  white-space: nowrap;
  
  .content-list {
    display: flex;
    
    .content-item {
      flex-shrink: 0;
      width: 280rpx;
      margin-right: 20rpx;
      
      .content-image {
        width: 100%;
        height: 200rpx;
        border-radius: 12rpx;
        margin-bottom: 15rpx;
      }
      
      .content-info {
        .content-title {
          display: block;
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
          margin-bottom: 10rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        .content-meta {
          display: flex;
          justify-content: space-between;
          
          .content-author,
          .content-views {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
}

.expert-list {
  .expert-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .expert-info {
      flex: 1;
      margin-left: 20rpx;
      
      .expert-name {
        display: block;
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .expert-title {
        display: block;
        font-size: 26rpx;
        color: #666;
        margin-bottom: 5rpx;
      }
      
      .expert-specialty {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .expert-action {
      margin-left: 20rpx;
    }
  }
}

.safe-bottom {
  height: 120rpx;
}
</style>